
<template>
  <div>
    <el-table :data="tableData" height="400" border style="width: 100%">
      <el-table-column
        prop="productId"
        label="产品编号"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="transId"
        label="交易编号"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="orderId"
        label="订单号"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="contrNbr"
        label="合同号"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="channel"
        label="渠道"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="bankCode"
        label="银行代码"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="cardNo"
        label="银行卡号"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="electAcctInd"
        label="是否为电子账户"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="transSn"
        label="交易顺序号"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="transDate"
        label="交易日期"
        width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="transStartTime"
        label="交易发起时间"
        width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="transFinishTime"
        label="交易结束时间"
        width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="transType"
        label="交易类型"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="transStatus"
        label="交易状态"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="transAmt"
        label="交易金额"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="traceNbr"
        label="交易流水号"
        width="150"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="transResult"
        label="交易结果"
        width="100"
        align="center"
      >
        <!-- <template scope="scope">
          <span v-if="scope.row.transResult == 'S000'">成功</span>
          <span v-else>失败</span>
        </template> -->
      </el-table-column>

      <el-table-column
        prop="transResultDesc"
        label="交易结果"
        width="100"
        align="center"
      >
      </el-table-column>

      <el-table-column
        prop="custName"
        label="客户姓名"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="idNo"
        label="证件号码"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="cardPhone"
        label="持卡人电话"
        width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="isComp"
        label="是否匹配"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="isError"
        label="是否差错"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="loanReturnCheckStatus"
        label="放款重提复核状态"
        width="150"
        align="center"
      ></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total,  sizes,  prev,  pager,  next,  jumper"
      :total="tableData.length"
    >
    </el-pagination>
  </div>
</template>
  
  <script>
import { queryCustomerLoadTransactionList } from "@/api/interface";
export default {
  components: {},
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      alldata: {},
    };
  },

  created() {
    // 拿到sessionStorage里的客户信息数据，初始化表格
    this.alldata = JSON.parse(sessionStorage.getItem("personalInfoData"));
    console.log("客户信息数据：", this.alldata);
    this.InitTableData();
  },
  watch: {
    $route: function (to, from) {
      console.log("监听【交易流水记录】route变化");
      this.$destroy();
    },
  },

  methods: {
    //table初始化
    InitTableData() {
      console.log("客户交易流水数据初始化  开始：");
      var params = {
        mobileNo: this.alldata.mobileNo,
        idNo: this.alldata.idNo,
      };
      //封装请求数据

      // this.tableData = [
      //   {
      //     productId: "欢喜贷（特欢喜）",
      //     transId: "57606",
      //     orderId: "94162",
      //     contrNbr: "HT2024051600011563",
      //     channel: "宝付",
      //     bankCode: "0105",
      //     cardNo: "6217000060100069119",
      //     electAcctInd: "否",
      //     transSn: "715823398673006",
      //     transDate: "20350913",
      //     transStartTime: "20240516093638",
      //     transFinishTime: "20240516093638",
      //     transType: "代付",
      //     transStatus: "成功",
      //     transAmt: "2000",
      //     traceNbr: "BAOFU202405160936387121LYgUIl",
      //     transResult: "S000",
      //     custName: "王明明",
      //     idNo: "110101197807250019",
      //     cardPhone: "15122334455",
      //     isComp: "否",
      //     isError: "否",
      //   },
      // ];

      queryCustomerLoadTransactionList(params).then((res) => {
        console.log("交易流水返回==", res);
        if (res.data.code == "0000") {
          // this.tableData = res.data.data.creditList;
          var data = res.data.data.contrDetailList;

          data.forEach((element) => {
            if (
              element.tmTransFlowList &&
              Array.isArray(element.tmTransFlowList)
            ) {
              element.tmTransFlowList.forEach((item) => {
                this.tableData.push(item);
              });
            }
          });
        }
      });

      console.log("客户交易流水数据初始化  结束 ");
    },

    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</script>
  